<template>
  <div class="app-container">
    <el-table
        :data="categoryDTOList"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :tree-props="{children: 'children'}">
        <el-table-column
          prop="name"
          label="名称"
          sortable
          width="500">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="level"
          label="level">
        </el-table-column>
        <el-table-column
          label="操作">
           <template slot-scope="scope">
            <el-button
              size="mini" v-if="scope.row.level == 1 || scope.row.level == 2">添加</el-button>
            <el-button 
              size="mini"
              type="danger" v-if="scope.row.children == null">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
  </div>
</template>

<script>
import categoryApi from '../../api/product/category.js'
export default {

  data() {
    return {
      id:'',
      categoryDTOList:[],//三级ID， category1_id,category2_id,category3_id
      myProps:{
         value:'id',
         label:'name'
      }
    }
  },

  // 生命周期函数：内存准备完毕，页面尚未渲染
  created() {
  },

  // 生命周期函数：内存准备完毕，页面渲染成功
  mounted() {
    this.findCategoryTree();
  },

  methods: {
    findCategoryTree(){
      categoryApi.findCategoryTree().then(res=>{
        this.categoryDTOList = res.data.data;
      })
    },
    categoryDTOChange(){

    },
    append(data) {
      debugger
      const newChild = { id: this.id++, name: '添加的内容', children: [] };
      if (!data.children) {
        this.$set(data, 'children', []);
      }
      data.children.push(newChild);
    },

    remove(node, data) {
      console.log(node)
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
  }
}
</script>

<style>
 .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>


